<script setup lang="ts" name="Category">
import {onMounted, ref, onBeforeUnmount, onUnmounted} from 'vue'
import { useCategoryStore } from '@/store/modules/category';
import { storeToRefs } from 'pinia';
const {getC1, getC2, getC3} = useCategoryStore()
const {c1Arr, c1Id, c2Arr, c2Id, c3Arr, c3Id} = storeToRefs(useCategoryStore())
onMounted(() => {
        getC1()
})

// 一级分类下拉菜单change事件
function handler() {
    c2Id.value = ''
    c3Arr.value = []
    c3Id.value = ''
    getC2()
}

function handler2() {
    c3Id.value = ''
    getC3()
}

// 接收父组件isShow
 defineProps(['isShow'])

 // 在组件销毁之前，清空在pinia的分类数据
onBeforeUnmount(() => {
    c1Id.value = ''
    c2Id.value = ''
    c3Id.value = ''
    c2Arr.value = []
    c3Arr.value = []
    
})
</script>


<template>
    <el-card>
            <el-form :inline="true" >
                <el-form-item label="一级分类" style="width: 30%;">
                    <!-- option: label为显示文字，value为select下拉菜单，收集的值 -->
                    <el-select :disabled="isShow !== 0" v-model="c1Id" @change="handler">
                        <el-option v-for="c1,index in c1Arr" :value="c1.id" :label="c1.name" :key="c1.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="一级分类" style="width: 30%;">
                    <el-select :disabled="isShow !== 0" v-model="c2Id" @change="handler2">
                        <el-option v-for="c2,index in c2Arr" :value="c2.id" :label="c2.name" :key="c2.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="一级分类" style="width: 30%;">
                    <el-select :disabled="isShow !== 0" v-model="c3Id" @change="">
                        <el-option v-for="c3,index in c3Arr" :value="c3.id" :label="c3.name" :key="c3.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-card>
</template>


<style scoped lang='scss'>

</style>